<template>
  <div>
    <div class="table-title">
      <el-row class="table-row">
        <el-col :span="index==1?11:6" v-for="(item,index) in tableData.headers">{{ item.name }}</el-col>
      </el-row>
    </div>
    <div class="table-content">
      <vue-seamless-scroll class="text-dec warp" :class-option="classOption" :data="tableData.data">
        <el-row class="table-row" v-for="(item,index) in tableData.data">
          <el-col :span="7">
            <div class="text-ellipsis">{{ item.name }}</div>
          </el-col>
          <el-col :span="11">
            <el-progress :percentage="item.percentage" :stroke-width="8"></el-progress>
          </el-col>
          <el-col :span="6">
            <div>{{ item.time }}</div>

          </el-col>
        </el-row>
      </vue-seamless-scroll>
    </div>
  </div>
</template>

<script>
import vueSeamlessScroll from "vue-seamless-scroll";
export default {
  name: "TableBar",
  components:{vueSeamlessScroll},
  props: {
    tableData: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data(){
    return {
      classOption:{
        autoPlay:false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.table-row {
  padding: .8rem 0;
}
::v-deep .el-progress__text  {
  color: rgba(191, 217, 255, 0.85) !important;
}
::v-deep .el-progress-bar__inner{
  //background-color:linear-gradient(to right, rgba(5,142,184,0.2), rgba(2,231,243,0.8),rgba(2,143,181,0.1)) 1 !important;
  background:linear-gradient(to right,#FF6900,#FFC134) !important;
}
.table-content{
  height:70%;
  .text-dec {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
}

.text-ellipsis{
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
</style>
